<template>
  <el-echarts theme="macarons" :option="option"></el-echarts>
</template>
<script>
// import { echartsXFormatter } from '@vimi/utils-tool'

export default {
  components: {},
  props: {},
  data() {
    return {
      orgClass: '',
      option: null,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.orgClass = this.$utils.getClientOrgClass()
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      let addressCode = this.$utils.getAddressCode()
      addressCode = `${addressCode.replace(/0+$/g, '')}%`
      let submitType = this.orgClass === 'org_gov_ny' ? '1' : '4'
      const [res] = await this.$utils.promise(
        this.$api.getDataQuery(
          'credit',
          'credit_level_review_gov_view',
          `?where=${encodeURIComponent(
            `"credit_level_review_gov_view.submit_type".eq(${submitType})&"credit_level_review_gov_view.address_code".like(${addressCode})&groupFields=bank_name&groupFunc=SUM(credit_level_review_gov_view.reply_funds)&fields=bank_name`
          )}`
        )
      )

      const xData = []
      const aData = []
      let bData = []

      let amountAll = 0
      if (res && res.data) {
        for (const p of res.data) {
          xData.push(p.bank_name || '-')
          aData.push(p.p)
          if (p.p) {
            amountAll += Number(p.p)
          }
        }
      }

      bData = aData.map(item => {
        return amountAll > 0 ? Math.round((item / amountAll) * 10000) / 100 : '-'
      })

      const chartData = {
        title: '银行放款分析',
        subtext: '',
        legend: ['金额（万元）', '占比（%）'],
        xData: xData,
        seriesData: [
          {
            name: '金额（万元）',
            type: 'bar',
            barMaxWidth: 60,
            data: aData,
            itemStyle: {
              normal: {
                label: { show: true, position: 'top' },
              },
            },
          },
          {
            name: '占比（%）',
            type: 'line',
            yAxisIndex: 1,
            data: bData,
            tooltip: {
              formatter: '{b} : {c} ({d}%)',
            },
          },
        ],
      }
      this.setOption(chartData)
    },

    setOption(data) {
      this.option = {
        title: {
          text: data.title,
          subtext: data.subtext,
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: data.legend,
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        grid: {
          top: 80,
          left: 50,
          right: 50,
        },
        xAxis: [
          {
            type: 'category',
            data: data.xData,
            // axisLabel: {
            //   formatter: v => echartsXFormatter(v, 5)
            // }
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额（万元）',
          },
          {
            type: 'value',
            name: '占比（%）',
          },
        ],
        series: data.seriesData,
      }
    },
  },
}
</script>
<style scoped></style>
